<template>
  <div class="login-container">
     <header>
       <ul>
         <li class="head-logo">
           <img class="head_logo" :src="login_logo">
         </li>
         <li class="head-t01">
           <span>欢迎登录大客户系统</span>
         </li>
         <li class="head-t02">
           <img :src="icon_customer_service">
           <a href="#"><span class="line-h24">中联客服</span></a>
         </li>
         <li class="head-t03">
           <img :src="icon_opinion">
           <a href="#"><span class="line-h24">反馈意见</span></a>
         </li>
       </ul>
     </header>
    <section class="login-page">
      <div id="container">
        <div class="login-b01">
          <el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left" label-width="0px"
                   class="card-box login-form">
            <p class="login-text01">登录您的系统</p>
            <ul>
              <li>
                <el-form-item prop="userKey" class="layui-form-item">
                  <el-input class="layui-input" name="userKey" type="text" v-model="loginForm.userKey" autoComplete="on" placeholder="账号" />
                </el-form-item>
              </li>
              <li>
                <el-form-item prop="password"  class="layui-form-item">
                  <el-input class="layui-input" name="password" type="password" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on"
                        placeholder="请输入密码" ></el-input>
                 </el-form-item>
              </li>
              <li class="login-btn">
                <div class="layui-form-item">
                  <el-form-item>
                    <el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
                      登 录
                    </el-button>
                  </el-form-item>
                  <el-form-item >
                    <span class="c-bule" id="forget" @click="forget()">忘记密码</span>
                    <span class="mr5 ml5">|</span>
                    <span class="c-bule" id="register" @click="register()">免费注册</span>
                  </el-form-item>
                </div>
              </li>
            </ul>
          </el-form>
        </div>
        <div class="login-b02">
          <ul>
            <li>&nbsp;</li>
            <li>标准的作业流系统</li>
            <li>统一的数据交换系统</li>
            <li>完善的运力跟踪系统</li>
            <li>让我们的物流管理更显专业气质</li>
            <li>&nbsp;</li>
            <li><p></p>——中联物流承诺给您更多！</li>
          </ul>
        </div>
      </div>
    </section>
    <footer>
      <div class="footer_text">
        <p>© 2005 - 2010 China-Union Logistics CO.,LTD. All Rights Reserved</p>
        <p><a href="#">关于中联</a> | <a href="#">服务条款</a></p>
      </div>
    </footer>
  </div>
</template>

<script>
import { isvalidUserKey } from '@/utils/validate'
import login_logo from '@/assets/image/login_logo.png'
import icon_customer_service from '@/assets/image/icon_customer_service.png'
import icon_opinion from '@/assets/image/icon_opinion.png'

export default {
  name: 'login',
  data() {
    const validateUserKey = (rule, value, callback) => {
      if (!isvalidUserKey(value)) {
        callback(new Error('请输入正确的用户名'))
      } else {
        callback()
      }
    }
    const validatePass = (rule, value, callback) => {
      if (value.length < 5) {
        callback(new Error('密码不能小于5位'))
      } else {
        callback()
      }
    }
    return {
      login_logo: login_logo,
      icon_customer_service: icon_customer_service,
      icon_opinion: icon_opinion,
      loginForm: {
        userKey: '',
        password: ''
      },
      loginRules: {
        userKey: [{ required: true, trigger: 'blur', validator: validateUserKey }],
        password: [{ required: true, trigger: 'blur', validator: validatePass }]
      },
      loading: false
    }
  },
  methods: {
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('Login', this.loginForm).then(() => {
            this.loading = false
            this.$router.push({ path: '/' })
          }).catch(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    register() {
      this.$router.push({ path: '/register' })
    },
    forget() {
      // this.$router.push({ path: '/forget' })
    }
  }
}
</script>

<style lang="css" scope>
  @import "../../styles/login/login.css";
  @import "../../styles/login/login_02.css";
  .login-b01{
    width: auto;
  }
  span.c-bule{
    color: #61bffa;
  }
  .ml5{
    margin-left: 5px;
  }
  .mr5{
    margin-right: 5px;
  }
  .line-h24{
    line-height: 24px;
  }
</style>

